<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0"></meta>
    <meta http-equiv="x-ua-compatible" content="ie=edge">
    <title>Title</title>
    <!--<link rel="stylesheet" href="../css/reset.css">-->
    <link rel="stylesheet" href="../fontawesome-5.15.4/css/all.css">
    <link rel="stylesheet" href="./style.css">
</head>
<body>
<header class="top-wrapper">
    <div class="menu-btn">
        <a href="#">
            <i class="fas fa-stream"></i>
        </a>
    </div>
    <h1 class="logo">
        <a href="#">I Learn</a>
    </h1>

    <div class="search-btn">
        <a href="#">
            <i class="fas fa-search"></i>
        </a>
    </div>
</header>
<div class="banner">
    <a href="#">
        <img src="./img/17/banner.png" alt="">
    </a>
</div>
<nav class="menu">
    <a class="course" href="#">
        <i class="fas fa-book"></i>
        My Courses</a>
    <a class="star" href="#">
        <i class="fas fa-star"></i>
        Star Teacher</a>
    <a class="sub" href="#">
        <i class="fas fa-subscript"></i>
        Subscription</a>
    <a class="download" href="#">
        <i class="fas fa-download"></i>
        My Download</a>
</nav>
<!--最新课程容器-->
<div class="course-list">
    <!--课程标题-->
    <div class="title">
        <h2>Latest course</h2>
        <a href="#">More+</a>
    </div>
    <!--课程列表-->
    <div class="item-list">
        <div class="item">
            <div class="cover">
                <img src="./img/17/cover.png" alt="">
            </div>

            <h3 class="course-title">
                摄影课程
            </h3>
            <div class="user-info">
                <div class="avatar">
                    <img src="./img/17/avatar.png" alt="">
                </div>
                <div class="nickname">
                    李四
                </div>
            </div>
        </div>
        <div class="item">
            <div class="cover">
                <img src="./img/17/cover.png" alt="">
            </div>

            <h3 class="course-title">
                摄影课程
            </h3>
            <div class="user-info">
                <div class="avatar">
                    <img src="./img/17/avatar.png" alt="">
                </div>
                <div class="nickname">
                    李四
                </div>
            </div>
        </div>
        <div class="item">
            <div class="cover">
                <img src="./img/17/cover.png" alt="">
            </div>

            <h3 class="course-title">
                摄影课程
            </h3>
            <div class="user-info">
                <div class="avatar">
                    <img src="./img/17/avatar.png" alt="">
                </div>
                <div class="nickname">
                    李四
                </div>
            </div>
        </div>
        <div class="item">
            <div class="cover">
                <img src="./img/17/cover.png" alt="">
            </div>

            <h3 class="course-title">
                摄影课程
            </h3>
            <div class="user-info">
                <div class="avatar">
                    <img src="./img/17/avatar.png" alt="">
                </div>
                <div class="nickname">
                    李四
                </div>
            </div>
        </div>
        <div class="item">
            <div class="cover">
                <img src="./img/17/cover.png" alt="">
            </div>

            <h3 class="course-title">
                摄影课程
            </h3>
            <div class="user-info">
                <div class="avatar">
                    <img src="./img/17/avatar.png" alt="">
                </div>
                <div class="nickname">
                    李四
                </div>
            </div>
        </div>
        <div class="item">
            <div class="cover">
                <img src="./img/17/cover.png" alt="">
            </div>

            <h3 class="course-title">
                摄影课程
            </h3>
            <div class="user-info">
                <div class="avatar">
                    <img src="./img/17/avatar.png" alt="">
                </div>
                <div class="nickname">
                    李四
                </div>
            </div>
        </div>
    </div>
</div>
<!--最新课程容器-->
<div class="course-list">
    <!--课程标题-->
    <div class="title">
        <h2>Latest course</h2>
        <a href="#">More+</a>
    </div>
    <!--课程列表-->
    <div class="item-list">
        <div class="item">
            <div class="cover">
                <img src="./img/17/cover.png" alt="">
            </div>

            <h3 class="course-title">
                摄影课程
            </h3>
            <div class="user-info">
                <div class="avatar">
                    <img src="./img/17/avatar.png" alt="">
                </div>
                <div class="nickname">
                    李四
                </div>
            </div>
        </div>
        <div class="item">
            <div class="cover">
                <img src="./img/17/cover.png" alt="">
            </div>

            <h3 class="course-title">
                摄影课程
            </h3>
            <div class="user-info">
                <div class="avatar">
                    <img src="./img/17/avatar.png" alt="">
                </div>
                <div class="nickname">
                    李四
                </div>
            </div>
        </div>
        <div class="item">
            <div class="cover">
                <img src="./img/17/cover.png" alt="">
            </div>

            <h3 class="course-title">
                摄影课程
            </h3>
            <div class="user-info">
                <div class="avatar">
                    <img src="./img/17/avatar.png" alt="">
                </div>
                <div class="nickname">
                    李四
                </div>
            </div>
        </div>
        <div class="item">
            <div class="cover">
                <img src="./img/17/cover.png" alt="">
            </div>

            <h3 class="course-title">
                摄影课程
            </h3>
            <div class="user-info">
                <div class="avatar">
                    <img src="./img/17/avatar.png" alt="">
                </div>
                <div class="nickname">
                    李四
                </div>
            </div>
        </div>
        <div class="item">
            <div class="cover">
                <img src="./img/17/cover.png" alt="">
            </div>

            <h3 class="course-title">
                摄影课程
            </h3>
            <div class="user-info">
                <div class="avatar">
                    <img src="./img/17/avatar.png" alt="">
                </div>
                <div class="nickname">
                    李四
                </div>
            </div>
        </div>
        <div class="item">
            <div class="cover">
                <img src="./img/17/cover.png" alt="">
            </div>

            <h3 class="course-title">
                摄影课程
            </h3>
            <div class="user-info">
                <div class="avatar">
                    <img src="./img/17/avatar.png" alt="">
                </div>
                <div class="nickname">
                    李四
                </div>
            </div>
        </div>
    </div>
</div>
<!--最新课程容器-->
<div class="course-list">
    <!--课程标题-->
    <div class="title">
        <h2>Latest course</h2>
        <a href="#">More+</a>
    </div>
    <!--课程列表-->
    <div class="item-list">
        <div class="item">
            <div class="cover">
                <img src="./img/17/cover.png" alt="">
            </div>

            <h3 class="course-title">
                摄影课程
            </h3>
            <div class="user-info">
                <div class="avatar">
                    <img src="./img/17/avatar.png" alt="">
                </div>
                <div class="nickname">
                    李四
                </div>
            </div>
        </div>
        <div class="item">
            <div class="cover">
                <img src="./img/17/cover.png" alt="">
            </div>

            <h3 class="course-title">
                摄影课程
            </h3>
            <div class="user-info">
                <div class="avatar">
                    <img src="./img/17/avatar.png" alt="">
                </div>
                <div class="nickname">
                    李四
                </div>
            </div>
        </div>
        <div class="item">
            <div class="cover">
                <img src="./img/17/cover.png" alt="">
            </div>

            <h3 class="course-title">
                摄影课程
            </h3>
            <div class="user-info">
                <div class="avatar">
                    <img src="./img/17/avatar.png" alt="">
                </div>
                <div class="nickname">
                    李四
                </div>
            </div>
        </div>
        <div class="item">
            <div class="cover">
                <img src="./img/17/cover.png" alt="">
            </div>

            <h3 class="course-title">
                摄影课程
            </h3>
            <div class="user-info">
                <div class="avatar">
                    <img src="./img/17/avatar.png" alt="">
                </div>
                <div class="nickname">
                    李四
                </div>
            </div>
        </div>
        <div class="item">
            <div class="cover">
                <img src="./img/17/cover.png" alt="">
            </div>

            <h3 class="course-title">
                摄影课程
            </h3>
            <div class="user-info">
                <div class="avatar">
                    <img src="./img/17/avatar.png" alt="">
                </div>
                <div class="nickname">
                    李四
                </div>
            </div>
        </div>
        <div class="item">
            <div class="cover">
                <img src="./img/17/cover.png" alt="">
            </div>

            <h3 class="course-title">
                摄影课程
            </h3>
            <div class="user-info">
                <div class="avatar">
                    <img src="./img/17/avatar.png" alt="">
                </div>
                <div class="nickname">
                    李四
                </div>
            </div>
        </div>
    </div>
</div>
</body>
</html>
